<template>
  <base-modal
    class="material-sn-dialog-container"
    :show.sync="visible"
    :title="title"
    width="600px"
  >
    <div class="material-sn-content">
      <!-- 返还方式表单 -->
      <form-builder :fields="fields" ref="form" :value="form" @update="updateForm">

      </form-builder>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button :disabled="pending" @click="visible = false">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" :disabled="pending" @click="submit">{{$t('common.base.submit')}}</el-button>
    </div>
  </base-modal>
</template>
<script>
import * as WareHouseApi from '@src/api/WareHouseApi';
import { getCommonDefaultLangForKey } from '@src/util/languages'
import { t } from '@src/locales'
export default {
  name: 'material-return-information-dialog',
  props: {
    value: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      pending: false,
      visible: false,
      title: t('common.form.preview.materialReturn.materialReturnInformationDialog.title1'),
      logisticsCompanyList: [],
      form: {
        returnType: '',
        company: '',
        companyId: '',
        code: ''
      }
    }
  },
  computed: {
    fields() {
      return [
        // TODO 国际化业务线自己接入
        // TODO: 切换此属性值，渲染物流公司字段卡顿修改。
        {
          formType: 'select',
          fieldName: 'returnType',
          displayName: t('common.fields.returnType.displayName'),
          placeholder: t('common.fields.returnType.placeholder'),
          displayNameLanguage:getCommonDefaultLangForKey('common.fields.returnType.displayName'),
          placeholderLanguage:getCommonDefaultLangForKey('common.fields.returnType.placeholder'),
          isNull: 0,
          setting: {
            dataSource: [
              {
                text: t('common.fields.returnType.dataSource[0]'),
                value: '自提/送',
              },
              {
                text: t('common.fields.returnType.dataSource[1]'),
                value: '物流',
              }
            ],
            dataSourceLanguage:getCommonDefaultLangForKey([{
                text: 'common.fields.returnType.dataSource[0]',
                value: '自提/送',
              },
              {
                text: 'common.fields.returnType.dataSource[1]',
                value: '物流',
              }])
          }
        },
        {
          formType: 'select',
          fieldName: 'companyId',
          displayName: t('common.fields.companyId.displayName'),
          placeholder: t('common.fields.companyId.placeholder'),
          displayNameLanguage:getCommonDefaultLangForKey('common.fields.companyId.displayName'),
          placeholderLanguage:getCommonDefaultLangForKey('common.fields.companyId.placeholder'),
          isNull: 0,
          setting: {
            dataSource: this.logisticsCompanyList,
            dependencies: {
              returnType: ['物流']
            }
          }
        },
        {
          formType: 'text',
          fieldName: 'code',
          displayName: t('common.fields.companyCode.displayName'),
          placeholder: t('common.fields.companyCode.placeholder'),
          displayNameLanguage:getCommonDefaultLangForKey('common.fields.companyCode.displayName'),
          placeholderLanguage:getCommonDefaultLangForKey('common.fields.companyCode.placeholder'),
          isNull: 0,
          setting: {
            dependencies: {
              returnType: ['物流']
            }
          }
        }
      ]
    },
  },
  methods: {
    open() {
      this.visible = true
    },
    getLogisticsCompanyList() {
      return (
        WareHouseApi.getLogisticsCompanyList({companyName: ''})
          .then(res => {
            
            if (res?.success) {
              let logisticsCompanyList = res?.data || [];
              
              this.logisticsCompanyList = logisticsCompanyList.map(item => {
                return Object.freeze({
                  text: item.name,
                  value: item.id
                })
              })
            
            }
            
          }).catch(err => {
            console.error(err)
          })
      )
    },
    updateForm({ field, newValue, oldValue }) {
      let { fieldName, displayName } = field;
      
      if (this.$appConfig.debug) {
        console.info(`[FormBuilder] => ${displayName}(${fieldName}) : ${JSON.stringify(newValue)}`);
      }
      
      this.$set(this.form, fieldName, newValue);
    },
    submit() {
      this.$refs.form
        .validate().then(validated => {
          
          if (!validated) {
            return 
          }
          let companyMap = this.logisticsCompanyList.filter(item => item.value === this.form?.companyId)
          this.form.company = companyMap[0]?.text || ''
          const newForm = Object.assign({}, this.form);
          const newReturnValue = Object.assign({}, this.value, newForm);
          this.$emit('update', { form: newReturnValue });
          this.visible = false
        })
    }
  },
  mounted() {
    this.getLogisticsCompanyList()
  }
}
</script>
<style lang="scss" scope>
.material-sn-content {
  padding: 10px;
  .bottom {
    padding: 0 4px;
    .tips {
      padding: 10px 0;
      font-size: 12px;
      color: #606266;
    }
  }
  
}
.el-textarea.is-disabled .el-textarea__inner {
  color: #606266 !important;
  background-color: #FFFFFF !important;
}
</style>